<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机微信</title>

  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/iconfont.css">

  <link rel="stylesheet" href="css/wx.css">

</head>

<body>
  <!-- 整体布局是上中下三块 -->
  <div class="main-box">

    <!-- 上方是左右，一边是微信，一边是两个图标 -->
    <div class="top-box">

      <div>微信</div>

      <div>
        <i class="iconfont">&#xe60b;</i>
        <i class="iconfont">&#xe657;</i>
      </div>

    </div>



    <div class="center-box">

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>


      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>



      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>

      <!-- 聊天区域 -->
      <div class="chat-info">

        <!-- 左图片右两行 -->
        <div class="chat-left">
          <i class="iconfont">&#xe620;</i>
        </div>

        <!-- 右边 -->
        <div class="chat-right">

          <div class="chat">
            <div class="title">2105班级群</div>
            <div>10:13</div>
          </div>

          <div class="chat">
            <div>两张图片上课用的</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>




      </div>




    </div>


    <div class="bottom-box">


      <!-- 图标带字两行 -->
      <div class="active">
        <i class="iconfont">&#xe631;</i>
        <br>
        微信
      </div>

      <div>
        <i class="iconfont">&#xe655;</i>
        <br>
        通讯录
      </div>

      <div>
        <i class="iconfont">&#xe616;</i>
        <br>
        发现
      </div>

      <div>
        <i class="iconfont">&#xe624;</i>
        <br>
        我
      </div>






    </div>


  </div>


</body>

</html>